---
interface Props {
    bgImg: string;
}
const {bgImg} = Astro.props;
---

<div class="w-full relative z-[1] mb-4">
    <div class="bg h-[500px]">
        <img th:src={bgImg}
            class="w-full block absolute h-full bg-cover bg-no-repeat"
        />
        <slot />
        <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28"
            preserveAspectRatio="none"
            shape-rendering="auto"
        >
            <defs class="astro-Q4VA5EPQ">
                <path
                    id="gentle-wave"
                    d="M -162 44 c 32 -1 55 -9 88 -9 s 57 10 88 10 s 58 -10 87 -10 s 55 11 87 11 v 7 h -350 z"
                    class="astro-Q4VA5EPQ"></path>
            </defs>
            <g class="parallax astro-Q4VA5EPQ">
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="0"
                    fill="rgba(255,255,255,0.7)"
                    class="astro-Q4VA5EPQ"></use>
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="3"
                    fill="rgba(255,255,255,0.5)"
                    class="astro-Q4VA5EPQ"></use>
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="5"
                    fill="rgba(255,255,255,0.3)"
                    class="astro-Q4VA5EPQ"></use>
                <use
                    xlink:href="#gentle-wave"
                    x="48"
                    y="7"
                    fill="#f1f5f9"
                    class="astro-Q4VA5EPQ"></use>
            </g>
        </svg>
    </div>
</div>

<style>
    .waves:where(.astro-Q4VA5EPQ) {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 15vh;
        min-height: 100px;
        max-height: 150px;
    }

    .parallax:where(.astro-Q4VA5EPQ) > use:where(.astro-Q4VA5EPQ) {
        -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5)
            infinite;
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax:where(.astro-Q4VA5EPQ) > use:where(.astro-Q4VA5EPQ):nth-child(1) {
        -webkit-animation-delay: -2s;
        animation-delay: -2s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
    }

    .parallax:where(.astro-Q4VA5EPQ) > use:where(.astro-Q4VA5EPQ):nth-child(2) {
        -webkit-animation-delay: -3s;
        animation-delay: -3s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
    }

    .parallax:where(.astro-Q4VA5EPQ) > use:where(.astro-Q4VA5EPQ):nth-child(3) {
        -webkit-animation-delay: -4s;
        animation-delay: -4s;
        -webkit-animation-duration: 13s;
        animation-duration: 13s;
    }

    .parallax:where(.astro-Q4VA5EPQ) > use:where(.astro-Q4VA5EPQ):nth-child(4) {
        -webkit-animation-delay: -5s;
        animation-delay: -5s;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
    }

    @-webkit-keyframes move-forever {
        0% {
            -webkit-transform: translate3d(-90px, 0, 0);
            transform: translate3d(-90px, 0, 0);
        }

        to {
            -webkit-transform: translate3d(85px, 0, 0);
            transform: translate3d(85px, 0, 0);
        }
    }

    @keyframes move-forever {
        0% {
            -webkit-transform: translate3d(-90px, 0, 0);
            transform: translate3d(-90px, 0, 0);
        }

        to {
            -webkit-transform: translate3d(85px, 0, 0);
            transform: translate3d(85px, 0, 0);
        }
    }

    .bg:where(.astro-Q4VA5EPQ) .line:where(.astro-Q4VA5EPQ) {
        background: url(/mask.png) repeat;
        width: 100%;
        position: absolute;
    }
</style>
